import React, { Component, Fragment } from "react";
// antd
import { DatePicker, Row, Col, Tag, Card, Button, Image } from "antd";
// http
import http from '../../../utils/request';

import alarm_img from '../img/alarm.png'
import sms_img from '../img/sms1.png'


// bizcharts
import { Chart, Tooltip, Point, Line } from 'bizcharts';
import moment from 'moment';


const { RangePicker } = DatePicker;

class Dashboard1 extends Component {
    constructor(props){
        super(props);
        this.state = {
            total_day_count_event: [],
            total_day_count_threshold: [],
            // total_day_count: [],

            total_count: null,
            threshold_count: null,
            event_count: null,
            sls_count: null,
            sms_count: null,
            begin_date: null,
            end_date: null,
            loading: false,
            threshold_percent: null,
            event_percent: null,
            sls_percent: null,
        }
    }

    componentDidMount() {
        this.loadData()
    }

    loadData = () => {
        this.setState({
            loading: true
        })
        const requestData = {
            'operation': 'alarm_trend',
            'begin_date': this.state.begin_date,
            'end_date': this.state.end_date,
        }

        const p0 = new Promise(resolve=>{
            http.get('/alarm/dashboard', {params: requestData}).then(response=>{
                resolve(response.data)
            }).catch()
        })

        Promise.all([p0]).then((res)=>{
            const resp_data = res[0].data
            const resp_data_threshold = resp_data.threshold
            const resp_data_event = resp_data.event
            const resp_data_sls = resp_data.sls
            const total_count = resp_data.count.total_count
            const threshold_count = resp_data.count.threshold_count
            const event_count = resp_data.count.event_count
            const sls_count = resp_data.count.sls_count
            const sms_count = resp_data.count.sms_count

            const threshold_percent = resp_data.count.threshold_percent
            const event_percent = resp_data.count.event_percent
            const sls_percent = resp_data.count.sls_percent

            const total_day_count_threshold = []
            const total_day_count_event = []
            const total_day_count_sls = []

            for (let i = 0; i < resp_data_threshold.length; i++) {
                total_day_count_threshold.push({date: resp_data_threshold[i].date, count: resp_data_threshold[i].count})
            }

            for (let i = 0; i < resp_data_event.length; i++) {
                total_day_count_event.push({date: resp_data_event[i].date, count: resp_data_event[i].count})
            }

            for (let i = 0; i < resp_data_sls.length; i++) {
                total_day_count_sls.push({date: resp_data_sls[i].date, count: resp_data_sls[i].count})
            }

            this.setState({
                total_day_count_threshold: total_day_count_threshold,
                total_day_count_event: total_day_count_event,
                total_day_count_sls: total_day_count_sls,
                total_count: total_count,
                threshold_count: threshold_count,
                event_count: event_count,
                sls_count: sls_count,
                sms_count: sms_count,
                threshold_percent: threshold_percent,
                event_percent: event_percent,
                sls_percent: sls_percent,
                loading: false,
            })
        })
    }

    onChange = (value, dateString) => {
        this.setState({
            begin_date: dateString[0] ? dateString[0] : null,
            end_date: dateString[1] ? dateString[1] : null,
        })
    }

    render(){
        const { total_day_count_threshold, total_day_count_event, total_day_count_sls, loading, sms_count, sls_count, threshold_count, event_count, total_count,
            threshold_percent, event_percent, sls_percent
        } = this.state
        var myStyle1 = {marginBottom: '30px', color: "#676767"}
        var myStyle2 = {marginBottom: '10px', color: "#676767"}
        var myStyleAlarm = {color: '#676767'}
        var myStyleTotal = {display: 'float', marginTop: '-35px', marginLeft: '40px', color: '#cf1322', fontSize: '20px'}
        var myStyleSMS = {display: 'float', marginTop: '-36px', marginLeft: '40px', color: '#cf1322', fontSize: '20px'}
        return (
            <Fragment>
                <Card>
                    <Row>
                        <space>
                            <RangePicker
                                ranges={{
                                    Today: [moment(), moment()],
                                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                                }}
                                onChange={this.onChange} /> 
                        </space>
                        <span style={{ marginLeft: '15px'}}>
                            <Button type="primary" htmlType="submit" onClick={this.loadData} loading={loading}>搜索</Button>
                        </span>
                    </Row>       
                </Card>

                <Row>
                    <Col span={12}>
                        <Card>                            
                            <div style={myStyle2}>总告警数</div>
                            <div>
                                <Image
                                width={30}
                                src={alarm_img}
                                ></Image>  
                            </div>
                            <div style={myStyleTotal}>{total_count}</div>        
                        </Card>
                    </Col>
                    <Col span={12}>
                        <Card> 
                            <div style={myStyle2}>短信调用</div>
                            <div>
                                <Image
                                width={30}
                                src={sms_img}
                                ></Image>  
                            </div>
                            <div style={myStyleSMS}>{sms_count}</div>
                        </Card>

                    </Col>
                </Row>

                <Row>
                    <Col span={8}>           
                        <Card>
                            <div style={myStyle2}>阈值告警</div>
                            <span style={myStyleAlarm}>{threshold_count}</span> 
                            <span style={myStyleAlarm}> ({threshold_percent}%)</span>
                        </Card>
                    </Col>
                    <Col span={8}>
                        <Card>
                            <div style={myStyle2}>事件告警</div>
                            <span style={myStyleAlarm}>{event_count}</span>
                            <span style={myStyleAlarm}> ({event_percent}%)</span>
                        </Card>
                    </Col>
                    <Col span={8}>
                        <Card>
                            <div style={myStyle2}>容器告警</div>
                            <span style={myStyleAlarm}>{sls_count}</span>
                            <span style={myStyleAlarm}> ({sls_percent}%)</span>
                             
                        </Card>
                    </Col>
                </Row>

                <Row>
                    <Col span={8}>
                        <Card>
                            {/* <div style={myStyle1}>阈值告警次数/天</div> */}
                            <div style={myStyle1}><Tag color="blue">阈值告警次数/天</Tag></div>
                            <Chart
                                appendPadding={[10, 0, 0, 10]}
                                autoFit
                                height={200}
                                data={total_day_count_threshold}
                                onLineClick={console.log}
                                scale={{ value: { min: 0, alias: '人均年收入', type: 'linear-strict' }, year: { range: [0, 1] } }}
                            >
                                <Line position="date*count" />
                                <Point position="date*count" />
                                <Tooltip showCrosshairs follow={false} />
                            </Chart>
                        </Card>
                    </Col>

                    <Col span={8}>
                        <Card>
                            <div style={myStyle1}><Tag color="blue">事件告警次数/天</Tag></div>
                            {/* <div style={myStyle1}>事件告警次数/天</div> */}
                            <Chart
                                appendPadding={[10, 0, 0, 10]}
                                autoFit
                                height={200}
                                data={total_day_count_event}
                                onLineClick={console.log}
                                scale={{ value: { min: 0, alias: '人均年收入', type: 'linear-strict' }, year: { range: [0, 1] } }}
                            >
                                <Line position="date*count" />
                                <Point position="date*count" />
                                <Tooltip showCrosshairs follow={false} />
                            </Chart>
                        </Card>
                    </Col>

                    <Col span={8}>
                        <Card>
                            <div style={myStyle1}><Tag color="blue">容器告警次数/天</Tag></div>
                            {/* <div style={myStyle1}>容器告警次数/天</div> */}
                            <Chart
                                appendPadding={[10, 0, 0, 10]}
                                autoFit
                                height={200}
                                data={total_day_count_sls}
                                onLineClick={console.log}
                                scale={{ value: { min: 0, alias: '人均年收入', type: 'linear-strict' }, year: { range: [0, 1] } }}
                            >
                                <Line position="date*count" />
                                <Point position="date*count" />
                                <Tooltip showCrosshairs follow={false} />
                            </Chart>
                        </Card>
                    </Col>
                </Row>

            </Fragment>
        )
    }
}
export default Dashboard1;